在製作表格之前，要先來了解表格的HTML標籤

表格必備HTML標籤

要製作一個基本的表格，一定會使用到以下四個HTML標籤

1. table 是表格的外框
   製作表格的第一步就是新增一個table標籤
   

2. tr 代表表格中的列(table row)，如果有三列，就要新增三個tr在table標籤內
   

3. th 代表表格中的表頭(table header)，會寫在第一個tr標籤內
   

4. td 代表表格中的欄位 (table data)，會寫在tr的裡面
   

設定表格上的CSS樣式

• 用border這個CSS屬性來設定HTML元素的邊框

table,th,td {
    border: 1px solid blue;
}

1px代表框線的粗細
solid代表框線為實心線
blue代表框線顏色

相關參考資料:
CSS values and units

border

在css寫下對表格的樣式設定後，會發現在瀏覽器上看到的畫面和預期不一樣

這是因為瀏覽器本身具有預設的樣式，表格元素和元素之間有預設了間距
可以在style.css檔案中 最上方貼上CSS Reset來改掉瀏覽器對於table的預設設定

將瀏覽器預設樣式改掉後 就能看到如預期設定的畫面

常用表格標籤屬性

• colspan 設定儲存格橫跨幾個欄位

 <th colspan="3">標題</th>

用colspan設定成橫跨三個欄位

• rowspan：設定儲存格垂直跨幾個欄位

<td rowspan="2">內容一</td>

用rowspan設定成垂直跨兩個欄位

參考資料:
HTML table

以上為個人學習筆記整理
若有錯誤，歡迎指正